<template>
  <div id="body_theme">
    <!-- 头部导航栏开始 -->
    <div>
      <div class="header scroll-header" id="header">
        <nav class="nav container">
          <a href="#" class="nav__logo">{{ $t("resume") }}</a>
          <div class="nav__menu" id="nav-menu">
            <ul class="nav__list grid">
              <li class="nav__item">
                <div @click="goAnchor('#home')" class="nav__link" href="#home">
                  <i class="uil uil-estate nav__icon"></i>
                  <p>{{ $t("home") }}</p>
                </div>
              </li>
              <li class="nav__item">
                <div @click="goAnchor('#about')" class="nav__link" href="#about">
                  <i class="uil uil-user nav__icon"></i>
                  <p>{{ $t("about") }}</p>
                </div>
              </li>
              <li class="nav__item">
                <div @click="goAnchor('#skills')" class="nav__link" href="#skills">
                  <i class="uil uil-file-alt nav__icon"></i>
                  <p>{{ $t("skills") }}</p>
                </div>
              </li>
              <li class="nav__item">
                <div @click="goAnchor('#portfolio')" class="nav__link" href="#portfolio">
                  <i class="uil uil-scenery nav__icon"></i>
                  <p>{{ $t("portfolio") }}</p>
                </div>
              </li>
              <li class="nav__item">
                <div @click="goAnchor('#contact')" class="nav__link" href="#contact">
                  <i class="uil uil-message nav__icon"></i>
                  <p>{{ $t("contact") }}</p>
                </div>
              </li>
              <!-- 翻译按钮 -->
              <li class="nav__item">
                <div class="nav__link" id="translate" value="en" @click="translate">
                  <div class="icon nav__icon-svg">
                    <i class="icon-fanyi"></i>
                  </div>
                  <a class="=nav__link" id="nav__translate">Translate</a>
                </div>
              </li>
              <!-- 切换主题颜色按钮 -->
              <li class="nav__item">
                <div class="nav__link">
                  <i class="uil uil-moon change-theme" id="theme-button" @click="change_theme"></i>
                  <div class="nav__toggle" id="nav-toggle">
                    <i class="uil uil-apps"></i>
                  </div>
                </div>
              </li>
              <!-- 全屏按钮 -->
              <li class="nav__item">
                <div class="nav__link" id="quanping" @click="quanping">
                  <img src="../assets/img/quanping.png" alt />
                </div>
              </li>
              <!-- 颜色按钮 -->
              <li class="nav__item">
                <div class="nav__link" id="quanping" @click="colortheme">
                  <img src="../assets/img/colortheme.png" alt :class="this.colorthemeflag ? 'rotate' : ''" />
                </div>
              </li>
              <!-- 金钥匙 -->
              <!-- <li class="nav__item">
                <div class="nav__link" id="quanping" @click="key">
                  <img src="../assets/img/key.png" alt />
                </div>
              </li> -->
            </ul>
            <i class="uil uil-times nav__close" id="nav-close"></i>
          </div>
        </nav>
      </div>
    </div>
    <!-- 头部导航栏结束 -->

    <!-- 主体开始 -->
    <div class="main">
      <!--==================== HOME ====================-->
      <section class="home section" id="home">
        <div class="home__container container grid">
          <div class="home__content grid">
            <div class="home__social">
              <a href="https://t.bilibili.com/" target="_blank" class="home__social-icon">
                <i class="icon icon-bilibili-line"></i>

                <!-- <i class="uil uil-linkedin-alt"></i> -->
                <!-- <svg
                  t="1674798484640"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2757"
                >
                  <path
                    d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                    fill="hsl(250deg 69% 61%)"
                    p-id="2758"
                  />
                </svg>-->
              </a>
              <a href="http://github.com" target="_blank" class="home__social-icon">
                <i class="uil uil-github-alt"></i>
              </a>
              <a href="https://gitee.com/" target="_blank" class="home__social-icon">
                <i class="icon icon-mayun"></i>
                <!-- <i class="uil uil-dribbble"></i> -->
                <!-- <svg
                  t="1674801734735"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4124"
                >
                  <path
                    d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z"
                    fill="hsl(250deg 69% 61%)"
                    p-id="4125"
                  />
                </svg>-->
              </a>
            </div>

            <div class="home__img">
              <svg class="home__blob" viewBox="0 0 200 187" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <mask id="mask0" mask-type="alpha">
                  <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 165.547 
                                130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 129.362C2.45775 
                                97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 -0.149132 97.9666 
                                0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z" />
                </mask>
                <g mask="url(#mask0)">
                  <path d="M190.312 36.4879C206.582 62.1187 201.309 102.826 182.328 134.186C163.346 
                                165.547 130.807 187.559 100.226 186.353C69.6454 185.297 41.0228 161.023 21.7403 
                                129.362C2.45775 97.8511 -7.48481 59.1033 6.67581 34.5279C20.9871 10.1032 59.7028 
                                -0.149132 97.9666 0.00163737C136.23 0.303176 174.193 10.857 190.312 36.4879Z" />
                  <image class="home__blob-img" x="0" y="-30" xlink:href="../assets/img/cat.png" />
                </g>
              </svg>
            </div>

            <div class="home__data">
              <h1 class="home__title">{{ $t("home__title") }}</h1>
              <h3 class="home__subtitle">{{ $t("home__subtitle") }}</h3>
              <p class="home__description">{{ $t("home__description") }}</p>
              <div @click="goAnchor('#contact')" class="button button-flex">
                <span>{{ $t("home__contact") }}</span>
                <i class="uil uil-message button__icon"></i>
              </div>
            </div>
          </div>
          <div class="home__scroll">
            <div @click="goAnchor('#about')" class="home__scroll-button button--flex">
              <i class="uil uil-mouse-alt-2 home__scroll-mouse"></i>
              <span class="home__scroll-name">
                {{ $t("home__scroll_name") }}
              </span>
              <i class="uil uil-arrow-down home__scroll-arrow"></i>
            </div>
          </div>
        </div>
      </section>

      <!--==================== ABOUT ====================-->
      <section class="about section" id="about">
        <h2 class="section__title">{{ $t("about__title") }}</h2>
        <span class="section__subtitle">{{ $t("about__subtitle") }}</span>
        <div class="about__container container grid">
          <img src="../assets/img/about.png" alt class="about__img" />

          <div class="about__data">
            <p class="about__description">{{ $t("about__description") }}</p>

            <div class="about__info">
              <div>
                <div class="about__info-title" id="counters" data-target="5000" data-info="04"></div>
                <span class="about__info-name">
                  {{ $t("about__info_name1") }}
                  <br />
                  {{ $t("about__info_name1_1") }}
                </span>
              </div>

              <div>
                <span class="about__info-title" id="counters" data-target="1000" data-info="05"></span>
                <span class="about__info-name">
                  {{ $t("about__info_name2") }}
                  <br />
                  {{ $t("about__info_name2_2") }}
                </span>
              </div>

              <div>
                <span class="about__info-title" id="counters" data-target="15000" data-info="03"></span>
                <span class="about__info-name">
                  {{ $t("about__info_name3") }}
                  <br />
                  {{ $t("about__info_name3_3") }}
                </span>
              </div>
            </div>

            <div class="about__buttons">
              <a href="javascript:void(0);" @click="download" class="button button--flex">
                <span>{{ $t("download") }}</span>
                <i class="uil uil-download-alt button__icon"></i>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!--==================== SKILLS ====================-->
      <section class="skills section" id="skills">
        <h2 class="section__title">{{ $t("skills__title") }}</h2>
        <span class="section__subtitle">{{ $t("skills__subtitle") }}</span>

        <div class="skills__container container grid">
          <div>
            <!--==================== SKILLS 1 ====================-->
            <div class="skills__content1 skills__open" @click="toggleSkills1">
              <div class="skills__header">
                <i class="uil uil-brackets-curly skills__icon"></i>

                <div>
                  <h1 class="skills__title">{{ $t("home__subtitle") }}</h1>
                  <span class="skills__subtitle">
                    {{ $t("skills__years") }}
                  </span>
                </div>

                <i class="uil uil-angle-down skills__arrow"></i>
              </div>

              <div class="skills__list grid">
                <div class="skills__data">
                  <div class="skills__titles">
                    <h3 class="skills__name">HTML</h3>
                    <span class="skills__number number__html">80%</span>
                  </div>
                  <div class="skills__bar">
                    <div class="skills__percentage skills__html"></div>
                  </div>
                </div>

                <div class="skills__data">
                  <div class="skills__titles">
                    <h3 class="skills__name">CSS</h3>
                    <span class="skills__number number__css">70%</span>
                  </div>
                  <div class="skills__bar">
                    <div class="skills__percentage skills__css"></div>
                  </div>
                </div>

                <div class="skills__data">
                  <div class="skills__titles">
                    <h3 class="skills__name">JavaScript</h3>
                    <span class="skills__number number__js">75%</span>
                  </div>
                  <div class="skills__bar">
                    <div class="skills__percentage skills__js"></div>
                  </div>
                </div>

                <div class="skills__data">
                  <div class="skills__titles">
                    <h3 class="skills__name">VUE</h3>
                    <span class="skills__number number__vue">85%</span>
                  </div>
                  <div class="skills__bar">
                    <div class="skills__percentage skills__vue"></div>
                  </div>
                </div>

                <div>
                  <p>
                    1. 有4年前端工作经验，统招全日制本科学历计算机专业，具有PC、移动端项目。
                  </p>
                  <br />
                  <p>
                    2. 核心技术栈精通：精通 HTML5、CSS3、JavaScript（ES6+）前端基础技术，熟练掌握 TypeScript；熟悉 Sass/Less/Tailwind
                    CSS，能独立实现复杂页面布局并保障多端视觉一致性。
                  </p>
                  <br />
                  <p>3. 主流框架与组件库：精通 Vue.js（Vue2/Vue3）技术栈，熟练运用 Vuex/Pinia/Vue Router 及 Element UI、Vant 等组件库；了解 React 框架及
                    React Hooks，具备组件化开发与大型项目实践经验。</p>
                  <br />
                  <p>
                    4. 跨端开发经验：具备微信小程序开发经验，熟悉原生或 uni-app/Taro 等跨端框架开发；有 H5、小程序等数字化产品前端开发经验，能产出高质量代码。
                  </p>
                  <br />
                  <p>
                    5. 前端工程化能力：熟练掌握 Webpack、Vite 等构建工具，具备项目打包、优化及性能调优能力；深谙模块化、组件化开发思想，能编写规范、可维护的代码。
                  </p>
                  <br />
                  <p>6. 性能优化与兼容性：具备扎实的前端性能优化经验，熟悉浏览器渲染原理、网络基础，掌握代码分包、懒加载等优化手段；保障主流浏览器兼容性与执行效率。</p>
                  <br />
                  <p>
                    7. 工程协作与版本管理：熟练使用 Git 版本控制工具，了解 Git Flow 等分支管理策略；熟悉前后端协作流程，具备接口调试经验，能高效配合后端完成功能开发。
                  </p>
                  <br />
                  <p>
                    8. 综合业务与协作能力：具备需求分析、技术方案落地能力，能与产品、业务人员、UI高效沟通；对负责模块的代码质量、开发进度负责，具备良好的团队协作与抗压能力。
                  </p>
                  <br />
                  <p>9. 熟练使用AI辅助编程，比如能够熟练使用Cursor、trae、ChatGPT等工具。</p>
                  <br />
                  <p>10. 了解 React, node.js, express，mobx、原型链。</p>
                  <br />
                </div>
              </div>
            </div>
            <!--==================== SKILLS 2 ====================-->
            <div class="skills__content2 skills__open" @click="toggleSkills2">
              <div class="skills__header">
                <i class="uil uil-server-network skills__icon"></i>

                <div>
                  <h1 class="skills__title" i18n="skills__title2">
                    Backend developer
                  </h1>
                  <span class="skills__subtitle" i18n="skills__years2"> {{ $t("skills__years2") }}</span>
                </div>

                <i class="uil uil-angle-down skills__arrow"></i>
              </div>

              <div class="skills__list grid">
                <div class="skills__data">
                  <div class="skills__titles">
                    <h3 class="skills__name">Java</h3>
                    <span class="skills__number number__java">45%</span>
                  </div>
                  <div class="skills__bar">
                    <div class="skills__percentage skills__java"></div>
                  </div>
                </div>

                <div class="skills__data">
                  <div class="skills__titles">
                    <h3 class="skills__name ">Node.js</h3>
                    <span class="skills__number number__node">45%</span>
                  </div>
                  <div class="skills__bar">
                    <div class="skills__percentage skills__node"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--==================== QUALIFICATION ====================-->
      <section class="qualification section" id="qualification">
        <h2 class="section__title">{{ $t("qualification__title") }}</h2>
        <span class="section__subtitle">
          {{ $t("qualification__subtitle") }}
        </span>
        <div class="qualification__container container">
          <div class="qualification__tabs">
            <div :class="[
              'qualification__button button--flex',
              qualificationtabactive1 ? 'qualification__active' : '',
            ]" data-target="#work" @click="qualificationclick1">
              <i class="uil uil-briefcase-alt qualification__icon"></i>
              <span>{{ $t("work") }}</span>
            </div>
            <div :class="[
              'qualification__button button--flex',
              qualificationtabactive2 ? 'qualification__active' : '',
            ]" data-target="#education" @click="qualificationclick2">
              <i class="uil uil-graduation-cap qualification__icon"></i>
              <span>{{ $t("education") }}</span>
            </div>
          </div>
          <div class="qualification__sections">
            <!--==================== QUALIFICATION CONTENT 1 ====================-->
            <div :class="[
              'qualification__content',
              qualificationtabactive1 ? 'qualification__active' : '',
            ]" data-content id="work">
              <!--==================== QUALIFICATION 0 ====================-->
              <div class="qualification__data">
                <div></div>
                <div>
                  <span class="qualification__rounder"></span>
                  <span class="qualification__line"></span>
                </div>

                <div @click="qualification0()" style="cursor: pointer;">
                  <h3 class="qualification__title">
                    君跻基因（苏州）科技有限公司
                  </h3>
                  <span class="qualification__subtitle">
                    {{ $t("qualification2__subtitle") }}
                  </span>
                  <div class="qualification__calendar">
                    <i class="uil uil-calendar-alt"></i>
                    2023.1-至今
                  </div>
                </div>
              </div>
              <!--==================== QUALIFICATION 1 ====================-->
              <div class="qualification__data">
                <div @click="qualification1()" style="cursor: pointer;">
                  <h3 class="qualification__title">
                    基蛋生物科技股份有限公司
                  </h3>
                  <span class="qualification__subtitle">
                    {{ $t("qualification1__subtitle") }}
                  </span>
                  <div class="qualification__calendar">
                    <i class="uil uil-calendar-alt"></i>
                    2022.07 - 2023.10
                  </div>
                </div>

                <div>
                  <span class="qualification__rounder"></span>
                  <span class="qualification__line"></span>
                </div>
              </div>
              <!--==================== QUALIFICATION 2 ====================-->
              <div class="qualification__data">
                <div></div>
                <div>
                  <span class="qualification__rounder"></span>
                  <!-- <span class="qualification__line"></span> -->
                </div>

                <div @click="qualification2()" style="cursor: pointer;">
                  <h3 class="qualification__title">
                    Webpower (威勃庞尔信息科技有限公司)
                  </h3>
                  <span class="qualification__subtitle">
                    {{ $t("qualification2__subtitle") }}
                  </span>
                  <div class="qualification__calendar">
                    <i class="uil uil-calendar-alt"></i>
                    2021.09-2022.07
                  </div>
                </div>
              </div>
            </div>
            <!--==================== QUALIFICATION CONTENT 2 ====================-->
            <div :class="[
              'qualification__content',
              qualificationtabactive2 ? 'qualification__active' : '',
            ]" data-content id="education">
              <!--==================== QUALIFICATION 1 ====================-->
              <div class="qualification__data">
                <div></div>
                <div>
                  <span class="qualification__rounder"></span>
                  <!-- <span class="qualification__line"></span> -->
                </div>
                <div @click="qualification4()" style="cursor: pointer;">
                  <h3 class="qualification__title">
                    {{ $t("qualification4__title") }}
                  </h3>
                  <span class="qualification__subtitle">
                    {{ $t("qualification4__subtitle") }}
                  </span>
                  <div class="qualification__calendar">
                    <i class="uil uil-calendar-alt"></i>
                    2022.07
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--==================== PORTFOLIO ====================-->
      <section class="portfolio section" id="portfolio">
        <h2 class="section__title">{{ $t("portfolio__title") }}</h2>
        <span class="section__subtitle">{{ $t("portfolio__subtitle") }}</span>
        <!-- dialog -->
        <div v-if="isModalVisible" class="modal" ref="modalRef">
          <div style="float:right;width: 30px;height: 30px;" @click="closeModal" ref="closeButton">
            <img src="../assets/img/close.png" alt="Close" />
          </div>
          <el-carousel :interval="10000" arrow="always" style="margin-top:30px">
            <el-carousel-item v-for="item in carouselSelectPicArr" :key="item">
              <div class="image-container">
                <img :src="item.pic" :class="item.orientation === 'portrait' ? 'portrait' : 'landscape'" alt="" />
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="modal_content">
            <div v-for="item in carouselSelectContent" :key="item">
              <span>项目:</span>
              <span><b>{{ item.itemName }}</b></span>
              <br>
              <span>开发团队:</span>
              <span>{{ item.team }}</span>
              <br>
              <span>开发周期:</span>
              <span>{{ item.time }}</span>
              <br>
              <span>开发环境:</span>
              <span>{{ item.environment }}</span>
              <br>
              <span>开发技术:</span>
              <span>{{ item.technology }}</span>
              <br>
              <span>项目结构:</span>
              <span>{{ item.structure }}</span>
              <br>
              <span v-if="item.path">路径:</span>
              <!-- <a v-if="item.path.includes('http')" :href="item.path" target="_blank">{{ item.path }}</a> -->
              <span><b>{{ item.path }}</b></span>
              <div class="gap"></div>
              <span v-if="item.description">项目描述:</span>
              <span>{{ item.description }}</span>
              <div class="gap"></div>
              <span v-if="item.Responsible_content">主要负责内容:</span>
              <br>
              <span v-for="ite in item.Responsible_content" :key=ite>{{ ite }}<br></span>
              <div class="gap"></div>
            </div>
          </div>
        </div>

        <div class="portfolio__container swiper-container">
          <div class="swiper-wrapper">
            <!--==================== PORTFOLIO 1 ====================-->
            <div class="cardcontainer">
              <div class="card" style="cursor: pointer;" v-for="citem in cardArr" :key="citem">
                <div class="front">
                  <img :src="citem.img" style="width: 100%; height: 100%; object-fit: cover;" />
                </div>
                <div class="content">
                  <!-- <img :src="citem.img" /> -->
                  <h3>{{ citem.title }}</h3>
                  <p>
                    {{ citem.description }}
                  </p>
                  <div class="explore" style="cursor: pointer;" @click="cardButton(citem)">Explore Now</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--==================== CONTACT ME ====================-->
      <section class="contact section" id="contact">
        <h2 class="section__title">{{ $t("contact__title") }}</h2>
        <span class="section__subtitle">{{ $t("contact__subtitle") }}</span>

        <div class="contact__container container grid">
          <div>
            <div class="contact__information">
              <i class="uil uil-phone-alt contact__icon"></i>

              <div>
                <h3 class="contact__title">{{ $t("tel") }}</h3>
                <span class="contact__subtitle">{{ $t("tel__number") }}</span>
              </div>
            </div>

            <div class="contact__information">
              <i class="uil uil-envelope contact__icon"></i>

              <div>
                <h3 class="contact__title">{{ $t("email") }}</h3>
                <span class="contatc__subtitle">fwl1962903162@163.com</span>
              </div>
            </div>

            <div class="contact__information">
              <i class="uil uil-map-marker contact__icon"></i>

              <div>
                <h3 class="contact__title">{{ $t("location") }}</h3>
                <span class="contatc__subtitle">
                  {{ $t("location__detail") }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- 主体结束 -->

    <!--==================== SCROLL TOP ====================-->
    <div id="scroll-up" :class="['srctop', srcactive ? 'show-scrolls' : '']" @click="goAnchor('#home')">
      <i class="icon icon-icon-test"></i>
    </div>
    <div class="footer">
      <div class="footer__bg">
        <div class="footer__container container grid">
          <div>
            <h1 class="footer__title">简历</h1>
            <span class="footer__subtitle">{{ $t("home__subtitle") }}</span>
          </div>

          <ul class="footer__links">
            <li>
              <div href="#skills" class="footer__link" @click="goAnchor('#skills')">
                {{ $t("skills") }}
              </div>
            </li>
            <li>
              <div href="#portfolio" class="footer__link" @click="goAnchor('#portfolio')">
                {{ $t("portfolio") }}
              </div>
            </li>
            <li>
              <div href="#contact" class="footer__link" @click="goAnchor('#contact')">
                {{ $t("contact") }}
              </div>
            </li>
          </ul>

          <div class="footer__socials" style="display: flex">
            <a href="https://gitee.com/" target="_blank">
              <div class="footicon">
                <i class="icon icon-mayun"></i>
              </div>
            </a>
            <a href="http://github.com" target="_blank">
              <div class="footicon">
                <i class="icon icon-github"></i>
              </div>
            </a>
            <a href="https://t.bilibili.com/" target="_blank">
              <div class="footicon">
                <i class="icon icon-bilibili-line"></i>
              </div>
            </a>
          </div>
        </div>

        <p class="footer__copy">
          &#169; Anson.Copy from
          <a class="footer__copy" href="https://www.youtube.com/c/Bedimcode" target="_blank">Bedimcode</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
//引入3D效果
import VanillaTilt from "vanilla-tilt";
//引入全屏插件
import ScreenFull from "screenfull";
export default {
  components: {},
  name: "",
  data() {
    return {
      srcactive: false, //判断qualification tab栏点击激活判断
      qualificationtabactive1: true, //work tab栏激活flag
      qualificationtabactive2: false, //education tab栏激活flag
      colorthemeindex: 1, //颜色主题索引
      colorthemeflag: false, //按钮是否 旋转判断
      isModalVisible: false, //是否打开弹框
      cardIndex: null,//选择哪一个卡片
      //卡片
      cardArr: [{
        index: 1,
        img: require('../assets/img/gpanimal1(1).png'),
        title: "基蛋生物网站",
        description: "Vue-cli + Vuex + Vue-Router + EelementUI"
      },
      {
        index: 2,
        img: require('../assets/img/mac.jpg'),
        title: "M.A.C魅可会员中心",
        description: "WXML+ WXSS + JavaScript + Vant-weapp"
      },
      {
        index: 3,
        img: require('../assets/img/wish(1).jpg'),
        title: "许愿商城小程序",
        description: "Uni-app + Uni-ui+Vue.js+Scss + Vuex+MVVM"
      },
      {
        index: 4,
        img: require('../assets/img/echarts1.png'),
        title: "电商平台监控系统",
        description: "Vue-cli + Echarts"
      },
      {
        index: 5,
        img: require('../assets/img/nike1(1).png'),
        title: "耐克专线管家",
        description: "Vue-cli + Vuex + Vue-Router + EelementUI + Echarts"
      },

      ],
      //弹框内轮播图
      carouselPicArr: [{
        pic: require('../assets/img/gpanimal.png'),
        index: 1,
        orientation: 'landscape'
      },
      {
        pic: require('../assets/img/gpanimal2.png'),
        index: 1,
        orientation: 'landscape'
      },
      {
        pic: require('../assets/img/gpanimal3.png'),
        index: 1,
        orientation: 'landscape'
      },
      {
        pic: require('../assets/img/gpanimal4.png'),
        index: 1,
        orientation: 'landscape'
      },
      {
        pic: require('../assets/img/mac.jpg'),
        index: 2, orientation: 'portrait'
      },
      {
        pic: require('../assets/img/mac2.jpg'),
        index: 2, orientation: 'portrait'
      },
      {
        pic: require('../assets/img/mac3.jpg'),
        index: 2, orientation: 'portrait'
      },
      {
        pic: require('../assets/img/wish.jpg'),
        index: 3, orientation: 'portrait'
      },
      {
        pic: require('../assets/img/wish2.jpg'),
        index: 3, orientation: 'portrait'
      },
      {
        pic: require('../assets/img/wish3.jpg'),
        index: 3, orientation: 'portrait'
      },
      {
        pic: require('../assets/img/echarts1.png'),
        index: 4, orientation: 'landscape'
      },
      {
        pic: require('../assets/img/nike.jpg'),
        index: 5, orientation: 'landscape'
      },
      {
        pic: require('../assets/img/nike2.png'),
        index: 5, orientation: 'landscape'
      }
      ],
      //选中的弹框内轮播图
      carouselSelectPicArr: [],
      //弹框中内容
      carouselContent: [
        {
          index: 1,
          itemName: '基蛋生物(动物)网站 + 基蛋生物(南美)网站 + 配套后台管理系统',
          team: '6人',
          time: '4个月',
          environment: 'VScode,Vue-cli',
          technology: ' Vue-cli + Vuex + Vue-Router + EelementUI',
          structure: '前端+后端( SpringBoot + Thymeleaf)',
          description: '基蛋生物网站系统是一个用于展示基蛋生物公司线下产品的网站，旨在提升产品交易率、提高工作效率、降低成本，主要针对海外用户对产品进行更详细的了解。后台管理系统提供产品上架、产品展示管理和客户端登录等功能。管理者可以分配用户角色，用户权限，查看登录日志，上传产品，对产品进行增删改查等操作，配合网站提高交易量',
          Responsible_content: ['1.产品 管理模块：负责产品的展示列表和增删改查的具体功能。', '2.询盘管理模块：负责收集网站的提交表单信息，整理用户需求方便业务部门更快联系询问的客户。', '3.客户端登录模块：实现单点登录功能，和注册新用户功能。', '4.网站展示模块：负责整个网站的展示，渲染，UI交互功能，大中小屏响应式，浏览器兼容等问题'],
          path: 'https://gpanimal.com/',
        },
        {
          index: 2,
          itemName: ' MAC 会员中心小程序 + 配套后台管理系统',
          team: '9人',
          time: '3个月',
          environment: 'Vscode、HBuilderX、微信开发者工具、PS、navicat',
          technology: ' WXML+ WXSS + JavaScript + Vant-weapp',
          structure: '后台前端(Vanilla Framework+VantUI)+后端',
          description: 'M∙A∙C化妆品是专业艺术彩妆品牌,为美国雅诗兰黛旗下所有。拥有上百款不同质地、不同色彩的眼影、唇膏、唇彩、粉底等彩妆。全球最具价值500大品牌。项目主要是给MAC会员中心微信小程序进行升级改造，并加上后台管理系统。升级限时抢购活动，倒计时功能。项目上线后，交易量提升20%，用户新增人数提高到200万人数',
          Responsible_content: ['1.小程序页面模块：负责和ui，后台开发人员的沟通，实现包括页面样式，交互效果，数据交互等前端效果， 使用HTML5+CSS3 配合VanUI组件库 实现对UI设计稿的100%还原', '2.小程序用户登录模块：负责实现用户登录功能和新用户注册功能，对用户权限进行分配处理', '3.文档编写：协作团队成员进行接口设计和文档编写，确保前后端数据传输和交互符合规范和需求。', '4.后管系统页面模块：负责配合UI新增页面，配合后端开发人员联调接口'],
          path: '微信小程序 搜索：M.A.C魅可会员中心',
        },
        {
          index: 3,
          itemName: ' 许愿商城小程序',
          team: '6人',
          time: '4个月',
          environment: 'HBuilderX 、微信开发者工具、workbench、蓝湖',
          technology: 'Uni-app + Uni-ui+Vue.js+Scss + Vuex+MVVM',
          structure: '前端+后端',
          description: ' 许愿商场小程序是一个以售卖盲盒的线上购物商场，抓住年轻人购买盲盒的潮流文化。小程序包含多个模块，购物商场，盲盒购买，福利中心，用户信息等。小程序的研发，主要是为了吸引年轻人进行消费这盲盒功能上线当天，当日流水量破10000元',
          Responsible_content: ['1.福利中心及相关模块:负责福利中心页面及其二级页的书写和功能的实现，配合整个项目的书写规范和书写风格，产出多个公共组件放入组件库，提供给组员使用。', '2.盲盒模块：负责对盲盒列表的展示效果，使用瀑布流 无限滚动效果，并实现多屏幕适配。'],
          path: '微信小程序 搜索：许愿商城',
        },
        {
          index: 4,
          itemName: ' 电商平台实时监控系统',
          team: '6人',
          time: '2个月',
          environment: 'VScode,Vue-cli',
          technology: ' Vue-cli + Echarts',
          structure: '前端+后端',
          description: '电商平台监控系统可以对平台上的商品信息、价格、售后服务进行监控。通过对消费者的购买行为、投诉记录等数据进行分析，可以及时发现和处理商家的违规行为，有效保障消费者的权益。电商平台监控系统可以对商品的图片、描述、销售量、评价等进行监控和分析。商家可以根据监控数据对商品进行优化和调整细节，提高商品的质量和用户体验，并提高销售额。',
        },
        {
          index: 5,
          itemName: ' 耐克专线管家',
          team: '12人',
          time: '6个月',
          environment: 'VScode,Vue-cli',
          technology: ' Vue-cli + Vuex + Vue-Router + EelementUI+ Echarts',
          structure: '前端+后端',
          description: '1.让数据价值发挥最大化：通过数据中台，可以将很多零散的、重复的业务数据集中起来，并进行统一管理和维护，从而使得数据产生价值的时候更高效。 2.提升用户体验：通过数据中台，可以将用户的需求收集、整理后再呈现给用户，让用户更加清晰了解自己的需求。  3.降低成本：通过数据中台，让业务人员更便捷地获取、分析和使用到数据。',
          Responsible_content: ['1.负责首页大屏中组件开发，联调后端接口，实现数据的响应。', '2.一点响应模块中聊天功能的实现并美化界面']
        }
      ],
      //弹框选择中的内容
      carouselSelectContent: [],
    };
  },
  computed: {},
  methods: {
    //锚点跳转
    goAnchor(selector) {
      //排它思想,动态激活样式
      //1.获取所有的导航栏元素
      var navs = document.getElementsByClassName("nav__link");
      for (var i = 0; i < navs.length - 1; i++) {
        navs[i].onclick = function () {
          //2.1 我们先将所有的激活样式干掉
          for (var i = 0; i < navs.length - 1; i++) {
            navs[i].className = "nav__link";
          }
          //2.2 然后才让当前元素添加激活样式
          this.className = "nav__link active-link";
        };
      }

      /*参数selector是id选择器（#anchor14）*/
      document.querySelector(selector).scrollIntoView({
        behavior: "smooth",
      });
    },
    //监听屏幕滚动 触发导航栏相应激活样式
    scrollActive() {
      var sections = document.getElementsByClassName("section");
      var arr = []; //定义数组
      for (var i in sections) {
        arr.push(sections[i]);
      }
      arr.pop();
      arr.pop();
      arr.pop();
      arr.splice(3, 1);
      //文档在窗口左上角垂直方向滚动的像素。
      const scrollY = window.pageYOffset;
      //打印当前滚动距离
      arr.forEach((current) => {
        //获取 div 元素的高度，包含内边距（padding）和边框（border）:
        const sectionHeight = current.offsetHeight;
        //获取 div 元素的顶部偏移量:
        const sectionTop = current.offsetTop - 150;
        //打印每个模块的距离顶部的距离
        var sectionId = current.getAttribute("id");
        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
          document
            .querySelector(".nav__menu div[href*=" + sectionId + "]")
            .classList.add("active-link");
        } else {
          document
            .querySelector(".nav__menu div[href*=" + sectionId + "]")
            .classList.remove("active-link");
        }
      });
    },
    //下载简历
    download() {
      axios
        .get("范文亮4年工作简历.pdf", {
          //静态资源文件夹public
          responseType: "blob", //重要
        })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          let fname = "范文亮的简历.pdf";
          link.href = url;
          link.setAttribute("download", fname);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.log("error:" + JSON.stringify(error));
        });
    },
    //简体屏幕滚动，除非回到顶部按钮
    scrollUp() {
      const scrollUp = document.getElementById("scroll-up");
      const scrollY = window.pageYOffset;
      if (scrollY >= 560) {
        this.srcactive = false;
      } else {
        this.srcactive = true;
      }
    },
    //点击skills下箭头
    toggleSkills1() {
      const skillsContent = document.getElementsByClassName("skills__content1");
      if (skillsContent[0].className.includes("skills__open")) {
        skillsContent[0].className = "skills__content1 skills__close";
      } else {
        skillsContent[0].className = "skills__content1 skills__open";
      }
    },
    toggleSkills2() {
      const skillsContent = document.getElementsByClassName("skills__content2");
      if (skillsContent[0].className.includes("skills__open")) {
        skillsContent[0].className = "skills__content2 skills__close";
      } else {
        skillsContent[0].className = "skills__content2 skills__open";
      }
    },
    //判断qualification tab栏点击激活
    qualificationclick1() {
      if (this.qualificationtabactive1) {
      } else {
        this.qualificationtabactive1 = true;
        this.qualificationtabactive2 = false;
      }
    },
    qualificationclick2() {
      if (this.qualificationtabactive2) {
      } else {
        this.qualificationtabactive1 = false;
        this.qualificationtabactive2 = true;
      }
    },
    //点击icon切换主题
    change_theme() {
      var navs = document.getElementById("theme-button");
      if (navs.className.includes("uil-sun")) {
        navs.className = "uil uil-moon change-theme";
      } else {
        navs.className = "uil uil-moon change-theme uil-sun";
      }
      var body = document.getElementById("body_theme");
      if (body.className.includes("dark-theme")) {
        body.className = "";
      } else {
        body.className = "dark-theme";
      }
    },
    //翻译
    translate() {
      if (this.$i18n.locale == "en") {
        this.$i18n.locale = "zh";
      } else {
        this.$i18n.locale = "en";
      }
    },
    //全屏
    quanping() {
      if (!ScreenFull.isEnabled) {
        alert("当前全屏功能不可用");
        return;
      }
      //直接全屏
      ScreenFull.toggle(); //全屏方法
    },
    //切换主题颜色
    colortheme() {
      // this.colorthemeflag = !this.colorthemeflag;
      this.colorthemeflag = true;
      setTimeout(() => {
        this.colorthemeflag = false;
      }, 1000);

      let root = document.querySelector(":root");
      //总共4中颜色
      /*Purple 250   1
        Green 142    2 
        Blue  230    3
        Pink 340     4
      */
      this.colorthemeindex += 1;
      if (this.colorthemeindex === 5) {
        this.colorthemeindex = 1;
      }
      if (this.colorthemeindex === 1) {
        root.style.setProperty("--hue-color", 250);
      } else if (this.colorthemeindex === 2) {
        root.style.setProperty("--hue-color", 142);
      } else if (this.colorthemeindex === 3) {
        root.style.setProperty("--hue-color", 230);
      } else if (this.colorthemeindex === 4) {
        root.style.setProperty("--hue-color", 340);
      }
    },
    //点击金钥匙 进入秘密花园
    key() {
      this.$router.push("/codeGarden");
    },
    //滚动条
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop == 200) {
        this.counter();
      }
      if (scrollTop == 700) {
        this.move1();
      }
      if (scrollTop == 1500) {
        this.move2();
      }
    },
    //数字滚动
    counter() {
      const counters = document.querySelectorAll("#counters");
      counters.forEach((counter) => {
        counter.innerText = "0";
        const updateCounter = () => {
          const target = +counter.getAttribute("data-target");
          const info = +counter.getAttribute("data-info");
          const c = +counter.innerText;
          const increment = target / 200;
          if (c < target) {
            counter.innerText = `${Math.ceil(c + increment)}`;
            setTimeout(updateCounter, 1);
          } else {
            counter.innerText = info;
          }
        };

        updateCounter();
      });
    },
    //进度条
    move1() {
      let html = document.querySelector(".skills__html");
      let nhtml = document.querySelector(".number__html");
      let css = document.querySelector(".skills__css");
      let ncss = document.querySelector(".number__css");
      let js = document.querySelector(".skills__js");
      let njs = document.querySelector(".number__js");
      let vue = document.querySelector(".skills__vue");
      let nvue = document.querySelector(".number__vue");

      let html_width = 0;
      let css_width = 0;
      let js_width = 0;
      let vue_width = 0;
      let html_id = setInterval(frame, 100);
      let css_id = setInterval(frame, 100);
      let js_id = setInterval(frame, 100);
      let vue_id = setInterval(frame, 100);

      function frame() {
        if (html_width >= 80) {
          clearInterval(html_id);
        } else {
          html_width++;
          html.style.width = html_width + "%";
          nhtml.innerHTML = html_width * 1 + "%";
        }
        if (css_width >= 70) {
          clearInterval(css_id);
        } else {
          css_width++;
          css.style.width = css_width + "%";
          ncss.innerHTML = css_width * 1 + "%";
        }
        if (js_width >= 75) {
          clearInterval(js_id);
        } else {
          js_width++;
          js.style.width = js_width + "%";
          njs.innerHTML = js_width * 1 + "%";
        }
        if (vue_width >= 85) {
          clearInterval(vue_id);
        } else {
          vue_width++;
          vue.style.width = vue_width + "%";
          nvue.innerHTML = vue_width * 1 + "%";
        }
      }
    },
    move2() {
      let java = document.querySelector(".skills__java");
      let njava = document.querySelector(".number__java");
      let node = document.querySelector(".skills__node");
      let nnode = document.querySelector(".number__node");
      let java_width = 0;
      let node_width = 0;
      let java_id = setInterval(frame, 100);
      let node_id = setInterval(frame, 100);
      function frame() {
        if (java_width >= 45) {
          clearInterval(java_id);
        } else {
          java_width++;
          java.style.width = java_width + "%";
          njava.innerHTML = java_width * 1 + "%";
        }
        if (node_width >= 45) {
          clearInterval(node_id);
        } else {
          node_width++;
          node.style.width = node_width + "%";
          nnode.innerHTML = node_width * 1 + "%";
        }
      }
    },
    //跳转到公司
    qualification0() {
      window.open('https://www.gentlegen.com/', "_blank")
    },
    qualification1() {
      window.open('https://www.getein.com.cn/', "_blank")
    },
    qualification2() {
      window.open('https://www.webpowerx.com/', "_blank")
    },
    qualification4() {
      window.open('https://www.masu.edu.cn/main.htm', "_blank")
    },
    //3D倾斜
    VanillaTilt() {
      window.addEventListener("scroll", this.scrollActive);
      window.addEventListener("scroll", this.scrollUp);
      // vanilla-tilt.js是一个平滑的3D倾斜JS库，具体参数配置度娘可查到
      VanillaTilt.init(document.querySelectorAll(".card"), {
        max: 15, //最大倾斜度数
        speed: 400, //倾斜转换的速度
        glare: true, //是否开启眩光效果
        "max-glare": 1, //最大眩光的不透明度
      });
    },
    showModal() {
      this.isModalVisible = true;
      this.$nextTick(() => {
        this.setModalPosition();
      });
    },
    closeModal() {
      this.isModalVisible = false;
      this.cardIndex = null;
    },
    setModalPosition() {
      const modal = this.$refs.modalRef;
      if (modal) {
        const { width, height } = modal.getBoundingClientRect();
        const left = (window.innerWidth - width) / 2 + 'px';
        const top = (window.innerHeight - height) / 2 + 'px';
        modal.style.left = left;
        modal.style.top = top;
      }
    },
    handleClickOutside(event) {
      if (!this.isModalVisible && event.target.outerHTML.includes("<img")) {
        this.closeModal();
      }
      if (
        this.isModalVisible &&
        this.$refs.modalRef &&
        !this.$refs.modalRef.contains(event.target)
      ) {
        // console.log(this.$refs.modalRef.contains(event.target))
        this.closeModal();
      }
      if (
        !this.isModalVisible &&
        !event.target.outerHTML.includes("<img") &&
        !this.$refs.modalRef && this.cardIndex
      ) {
        this.showModal();
      }


    },
    cardButton(item) {
      this.cardIndex = item.index
      var filteredArr = this.carouselContent.filter(item => {
        return item.index == this.cardIndex
      })
      this.carouselSelectContent = filteredArr
      var filteredPicArr = this.carouselPicArr.filter(item => {
        return item.index == this.cardIndex
      })
      this.carouselSelectPicArr = filteredPicArr

    }
  },
  created() {
    this.translate(); //刚开始就调用一次翻译，让页面都是中文
  },
  mounted() {
    this.VanillaTilt();//3D倾斜
    this.counter(); //数字滚动
    window.addEventListener("scroll", this.windowScroll); //滚动条
    document.addEventListener("click", this.handleClickOutside);
  },
  beforeUnmount() {
    document.removeEventListener("click", this.handleClickOutside);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },

};
</script>

<style scoped>
.srctop {
  position: fixed;
  color: white;
  /* right: 10px;
  bottom: 30px; */
  right: 1%;
  bottom: 10%;
  background-color: var(--first-color);
  opacity: 0.8;
  padding: 0.3rem 0.3rem;
  border-radius: 0.4rem;
  z-index: var(--z-tooltip);
  transition: 0.4s;
}

/* 控制iconfont的大小 */
.icon[data-v-fae5bece],
.iconfont[data-v-fae5bece] {
  font-size: 26px;
}

.icon,
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

/* 控制全屏图片尺寸 */
#quanping {
  font-size: 20px;
  width: 24px;
}

#quanping:hover {
  color: var(--first-color);
}

#quanping img:hover {
  color: var(--first-color);
}

.rotate {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.show-scrolls {
  bottom: -10%;
}

/* 3d悬停卡片 */
.swiper-wrapper {
  /* max-width: 900px; */
}

.cardcontainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1;
}

.cardcontainer .card {
  position: relative;
  width: 280px;
  height: 400px;
  /* background-color: rgba(247, 0, 148, 0.1); */
  margin: 30px;
  border-radius: 15px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

.cardcontainer .card .content {
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}

.cardcontainer .card:hover .content {
  transform: translateY(0);
  opacity: 1;
}

.cardcontainer .card .front {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}



/* .cardcontainer .card .content {
  transform: translateY(0);
  opacity: 1;
} */


.cardcontainer .card .content h2 {
  position: absolute;
  top: -80px;
  right: 25px;
  font-size: 128px;
  color: rgba(255, 255, 255, 0.05);
}

.cardcontainer .card .content h3 {
  font-size: 28px;
  color: var(--first-color);
}

.cardcontainer .card .content p {
  font-size: 16px;
  color: var(--first-color);
  font-weight: 300;
  margin: 10px 0 15px 0;
}

.cardcontainer .card .content .explore {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  background-color: var(--first-color);
  color: #000;
  text-decoration: none;
  border-radius: 20px;
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 对话框 */
.modal {
  position: fixed;
  background-color: white;
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  z-index: 999;
  overflow: auto;
  border-radius: 20px;
}

/deep/ .el-carousel__container {
  position: relative;
  height: 300px;
  width: 80%;
  margin: 20px auto;
  border-radius: 20px;
}

.el-carousel__item {
  border-radius: 20px;
}

.modal_content {
  width: 80%;
  margin: auto;
}

.modal_content a {
  text-decoration: underline;
  cursor: pointer;
}

.gap {
  height: 40px;
  width: 100%;
}

.carousel-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.image-container {
  text-align: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.portrait {
  height: 300px !important;
}

.landscape {
  max-width: 100%;
}

/* 底部icon图 */
.footicon {
  color: #fff;
  padding-right: 15px;
}
</style>
